<template>
	<mainContainer>
		<el-row>
			<!-- 地区 -->
			<el-col :span="9">
				<div class="box">
					<el-scrollbar>
						<el-tree :ref="treeRef" node-key="id" lazy :load="loadNode" :props="defaultProps"
							@node-click="nodeClick" />
					</el-scrollbar>
				</div>
			</el-col>
			<el-col :span="15">
				<el-button-group>
					<el-button type="primary" icon="el-icon-plus" @click="add">新增下级</el-button>
					<el-button type="primary" icon="el-icon-delete" @click="del">删除</el-button>
				</el-button-group>
				<el-form ref="refForm" :model="state.regionForm" label-width="120px" :rules="state.rules" status-icon>
					<el-form-item label="父区划编号" prop="parentCode">
						<el-input v-model="state.regionForm.parentCode" show-word-limit maxlength="50"></el-input>
					</el-form-item>
					<el-form-item label="父区划名称" prop="parentName">
						<el-input v-model="state.regionForm.parentName" show-word-limit maxlength="50"></el-input>
					</el-form-item>
					<el-form-item label="区划编号" prop="code">
						<el-input v-model="state.regionForm.code" show-word-limit maxlength="50"></el-input>
					</el-form-item>
					<el-form-item label="区划子编号" prop="subCode">
						<el-input v-model="state.regionForm.subCode" show-word-limit maxlength="50"></el-input>
					</el-form-item>
					<el-form-item label="区域名称" prop="name">
						<el-input v-model="state.regionForm.name" show-word-limit maxlength="50"></el-input>
					</el-form-item>
					<el-form-item label="区划等级" prop="level">
						<el-input v-model="state.regionForm.level" show-word-limit maxlength="50"></el-input>
					</el-form-item>
					<el-form-item label="区划排序" prop="sort">
						<el-input v-model="state.regionForm.sort" show-word-limit maxlength="50"></el-input>
					</el-form-item>
					<el-form-item label="区划备注" prop="remark">
						<el-input v-model="state.regionForm.remark" show-word-limit maxlength="50"></el-input>
					</el-form-item>
				</el-form>
				<el-button-group style="text-align: center;">
					<el-button @click="handleClose">关 闭</el-button>
					<el-button type="primary" :loading="loading" @click="submitForm(formRef)">确 认</el-button>
				</el-button-group>
			</el-col>
		</el-row>
	</mainContainer>
</template>
<script lang="ts" setup name="region">
import { reactive, ref, watch } from 'vue';
import { getLazyTree, getDetail, submit, remove } from '/@/api/upms/region';
import { ElMessageBox, ElMessage, ElTree } from 'element-plus';

const state = reactive({
	topCode: '00',
	treeCode: '',
	treeParentCode: '',
	treeData: [],
	regionForm: {
		parentCode: '',
		parentName: '',
		code: '',
		subCode: '',
		name: '',
		level: '',
		sort: '',
		remark: ''
	},
	rules: {

	}
});
// 树组件实例
const treeRef = ref(null)
const loading = ref(false);
const filterText = ref('');
const refForm = ref();

const defaultProps = {
	label: 'title',
	children: 'children',
	hasChildren: 'hasChildren'

};

watch(filterText, (val) => {
	// 'regionForm.subCode'() {
	// 	this.regionForm.code = this.regionForm.parentCode + this.regionForm.subCode;
	// },
});

// 懒加载方法
const loadNode = async (node: Node, resolve: (data: []) => void) => {
	if (node.level === 0) {
		await getBuildingNode(resolve);
	} else {
		getLazyTree(node.data.id).then(res => {
			return resolve(res.data.data.map(item => ({ ...item, hasChildren: !item.hasChildren })))
		});

	}
};

const getBuildingNode = (resolve) => {
	loading.value = true;
	getLazyTree(state.topCode).then(res => {
		return resolve(res.data.data.map(item => ({ ...item, hasChildren: !item.hasChildren })))
	});
};



const nodeClick = (data) => {
	state.treeCode = data.id;
	state.treeParentCode = data.parentId;
	getDetail(state.treeCode).then(res => {
		state.regionForm = res.data.data;
		state.regionForm.subCode = state.regionForm.code.replace(state.regionForm.parentCode, '');
	})
};


/**
 * 新增按钮
 */
const add = () => {
	refForm.value.initForm();
};
/**
 * 修改按钮
 */
const edit = (row: any) => {
	refForm.value.initForm(row);
};
/**
 * 删除按钮
 */
const del = (id: string) => {
	ElMessageBox.confirm('此操作将删除该用户，是否继续?', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		delObj(id)
			.then(() => {
				ElMessage.success('删除成功');
				initPage();
			})
			.catch(() => { });
	});
};
// 子组件通过 defineExpose 暴露指定的属性给父组件
defineExpose({
	treeRef, // 暴露树组件实例
})
</script>
<style scoped>
.box {
	height: 800px;
}

.el-scrollbar {
	height: 100%;
}

.box .el-scrollbar__wrap {
	overflow: scroll;
}
</style>
